<template>
  <div class="price-rage-container">
    <el-form-item label="价格区间" />
    <el-row class="mb-4" v-for="(item, index) in priceRange" :key="index">
      <el-col :span="4">
        <div class="flex justify-start item-center column-gap-1">
          <el-input type="number" v-model="item.upperPiece"></el-input>
          <div style="width: 100px">
            {{ index === priceRange.length - 1 ? "件以上：" : "件：~" }}
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="index < priceRange.length - 1">
        <div class="flex justify-start item-center column-gap-1">
          <el-input type="number" v-model="item.lowerPiece"></el-input>
          <div>件：</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="flex justify-start item-center column-gap-1">
          <el-input type="number" v-model="item.money"></el-input>
          <div style="width: 90px">元/件</div>
        </div>
      </el-col>
      <el-col :span="1">
        <el-button
          style="font-size: 16px"
          icon="el-icon-circle-plus-outline"
          circle
          @click="plus(index)"
        ></el-button>
      </el-col>
      <el-col :span="1">
        <el-button
          style="font-size: 16px"
          icon="el-icon-remove-outline"
          circle
          @click="remove(index)"
        ></el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Price from './price.vue'
const tmp = { upperPiece: '', lowerPiece: '', money: '' }
export default {
  name: 'priceRage',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: [Array, undefined, null]
  },
  computed: {
    priceRange: {
      set (value) {
        console.log(value)
      },
      get () {
        return this.value
      }
    }
  },
  data () {
    return {
      // priceRange: [
      //   { upperPiece: 0, lowerPiece: 20, money: 0.90 },
      //   { upperPiece: 0, lowerPiece: 20, money: 0.90 }
      // ]
    }
  },
  components: { Price },
  mounted () {

  },
  methods: {
    plus (index) {
      if (this.priceRange.length >= 3) {
        this.$message.error('最多设置三个价格区间')
        return
      }
      this.priceRange.push({ ...tmp })
    },
    remove (index) {
      if (this.priceRange.length <= 1) {
        this.$message.error('最少设置一个区间')
        return
      }
      this.priceRange.splice(index, 1)
      this.priceRange[this.priceRange.length - 1].lowerPiece = ''

    }
  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
.price-rage-container {
}
</style>